<template>
    <div class="announcement_box displayBox">
        <LargeScreenView style="height: 300px"> <slot>公告发布</slot> </LargeScreenView>

        <div class="announcement_content">
            <ResourceHorizontal :data-list="dataList"></ResourceHorizontal>
        </div>
    </div>
</template>
<!--公告-->
<script setup>
import LargeScreenView from "@/components/publicComponent/LargeScreenView.vue";

import {onMounted, ref} from "vue";
import ResourceHorizontal from "@/components/publicComponent/ResourceHorizontal.vue";
import api from "@/request/index.js";

//内容列表
const dataList = ref([
    {
        id:"",//文章id
        uid: "",//文章所属用户id
        content: "", //文章内容
        title: "", //文章标题
        support: "", //点赞数
        visit: "", //浏览数
        cover: "", //封面
        time: new Date,//文章时间
        kind:"公告",
        support_statue: false, //是否点赞
    }
]);

//当前页码，类型，查询条数
const pages = ref({
    size: 7,//10条
    kind:"公告",//类型
    page:0,
    current: 1, //第一页
    last:"",//是否最后一页
});

//是否开启滚动加载
const scrollLoad = ref(true);

//监听页面的滚动高度,快达到底部时加载文章数据
const throttleHandleScroll = () => {
    //执行的高度,距离底部高度
    const distanceToBottom = document.documentElement.scrollHeight - window.innerHeight - window.scrollY;
    if (distanceToBottom <= 200 && scrollLoad.value && pages.value.page > pages.value.current) {
        scrollLoad.value = false;
        console.log("滚动加载文章数据~~~~");
        pages.value.current += 1;
        getData();
    }else if(distanceToBottom > 200){
        scrollLoad.value = true;
    }
};

//获取数据列表
const getData=()=>{
    api.getArticlePage(pages.value.current,pages.value.size,pages.value.kind).then((res)=>{
        dataList.value = dataList.value.concat(res.data.data.records);
        pages.value.page = res.data.data.page;
    });
};

//预加载
onMounted(()=>{
    dataList.value = [];
    getData();
    window.addEventListener('scroll', throttleHandleScroll);
})

</script>

<style scoped>
.announcement_box {

}
.announcement_content{
    margin: auto;
    width: 780px;
}
</style>